/* eslint-disable no-undef */
<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<header>
				<div class="params">
					<el-form ref="form" :inline="true" :model="queryData">
						<el-form-item class="time-options" label="访问时间">
							<el-date-picker
								v-model="searchTime"
								size="medium"
								:picker-options="pickerOptions"
								format="yyyy-MM-dd HH:mm:ss"
								type="datetimerange"
								range-separator="-"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								align="right"
								:clearable="false"
								:default-time="defaultTime"
								style="width: 375px"
								class="time-options-value"
							></el-date-picker>
						</el-form-item>

						<el-form-item>
							<el-button
								type="primary"
								icon="el-icon-search"
								:disabled="loading"
								size="medium"
								@click="search1"
							>
								查询
							</el-button>
							<el-button
								icon="el-icon-refresh-left"
								:disabled="loading"
								size="medium"
								@click="reset1"
							>
								重置
							</el-button>
						</el-form-item>
					</el-form>
				</div>
				<statistics
					v-if="Object.keys(totalData).length > 0"
					:key="time"
					:total-data="totalData"
				></statistics>
			</header>
		</div>
	</div>
</template>

<script>
import statistics from './statistics'
import list from '@/mixins/list'
import dayjs from 'dayjs'

export default {
	name: 'Data',
	components: {
		statistics
	},
	mixins: [list],
	props: {
		showData: {
			type: Boolean,
			default: () => false
		},
		rowData1: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			rowData: {},
			activeName: 'first',
			totalData: {},
			time: Date.now(),
			// optionsValue: '',
			tableData: [],
			searchTime: [],
			queryData: {
				optionsValue: '',
				options: 'parentProxyName',
				searchTime: [],
				orderType: undefined,
				orderKey: undefined
			}
		}
	},
	created() {
		this.getActivityInviteConfigApi()
	},
	mounted() {},
	methods: {
		getActivityInviteConfigApi() {
			this.$api
				.getActivityInviteConfigApi()
				.then((res) => {
					if (res?.code === 200) {
						this.rowData = {
							...res?.data
						}
						this.loadPageTotal()
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		loadPageTotal() {
			const [startTime, endTime] = this.searchTime || []
			const data = {
				activityId: this.rowData.id,
				merchantId: this.rowData.merchantId,
				visitTimeStart:
					(startTime &&
						dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')) ||
					undefined,
				visitTimeEnd:
					(endTime && dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')) ||
					undefined
			}

			this.$api
				.getActivityVisitDataStatistic(data)
				.then((res) => {
					if (res?.code === 200) {
						this.totalData = res.data
						this.time = Date.now()
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		search1() {
			this.loadPageTotal()
		},
		reset1() {
			this.searchTime = []
			this.totalData = {}
			this.loadPageTotal()
		}
	}
}
</script>

<style lang="scss" scoped>
header {
	position: relative;
	.close {
		width: 45px;
		height: 45px;
		position: absolute;
		right: 15px;
		top: 0;
		font-size: 25px;
		cursor: pointer;
	}
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
</style>
